การใช้งาน CSS Container Query Logical Combinations อย่างเชี่ยวชาญ: ปลดปล่อยพลังของตัวดำเนินการทางตรรกะ

CSS container queries แสดงถึงวิวัฒนาการที่สำคัญในการออกแบบเว็บที่ตอบสนอง (responsive web design) ซึ่งช่วยให้นักพัฒนาสามารถจัดสไตล์องค์ประกอบต่างๆ ตามขนาดหรือสถานะของคอนเทนเนอร์ที่ครอบอยู่ แทนที่จะเป็นขนาดของ viewport ในขณะที่ container queries พื้นฐานมีความยืดหยุ่นที่ทรงพลัง แต่ศักยภาพที่แท้จริงจะถูกปลดล็อกเมื่อใช้ร่วมกับตัวดำเนินการทางตรรกะ คู่มือฉบับสมบูรณ์นี้จะเจาะลึกถึงวิธีการใช้ 'and', 'or', และ 'not' เพื่อสร้างเลย์เอาต์ที่ซับซ้อนและปรับเปลี่ยนได้ซึ่งตอบสนองต่อเงื่อนไขของคอนเทนเนอร์ได้อย่างแม่นยำ

CSS Container Queries คืออะไร? สรุปสั้นๆ

ก่อนที่จะเจาะลึกเรื่องตัวดำเนินการทางตรรกะ เรามาทบทวนกันสั้นๆ ว่า container queries คืออะไรและทำไมจึงมีความสำคัญ

Media queries แบบดั้งเดิมจะอิงตาม viewport ซึ่งหมายความว่ามันจะตอบสนองต่อขนาดของหน้าต่างเบราว์เซอร์ ในทางกลับกัน Container queries ช่วยให้คุณสามารถใช้สไตล์ตามขนาดหรือสถานะของ องค์ประกอบที่ครอบอยู่ (containing element) ได้ ซึ่งให้การควบคุมที่ละเอียดมากขึ้นและทำให้การออกแบบที่ตอบสนองแบบอิงตามคอมโพเนนต์เป็นจริงได้

ตัวอย่างเช่น คุณอาจมีคอมโพเนนต์การ์ดที่แสดงข้อมูล ด้วย container queries คุณสามารถปรับเลย์เอาต์ของการ์ดตามความกว้างของมันภายในคอนเทนเนอร์แม่ หากการ์ดกว้างพอ ก็สามารถแสดงข้อมูลในแนวนอนได้ แต่ถ้าแคบ ก็สามารถจัดเรียงองค์ประกอบในแนวตั้งได้ สิ่งนี้ช่วยให้มั่นใจได้ว่าการ์ดจะดูดีไม่ว่าจะวางไว้ที่ใดบนหน้าเว็บ

ในการใช้ container queries คุณต้องสร้าง container context บนองค์ประกอบก่อน ซึ่งทำได้โดยใช้คุณสมบัติ container-type ค่าที่ใช้บ่อยที่สุดสองค่าคือ:

• size: container query จะตอบสนองต่อทั้งความกว้างและความสูงของคอนเทนเนอร์
• inline-size: container query จะตอบสนองต่อขนาดในแนว inline (โดยทั่วไปคือความกว้างในโหมดการเขียนแนวนอน)

คุณยังสามารถใช้ container-name เพื่อตั้งชื่อให้กับคอนเทนเนอร์ของคุณ ซึ่งช่วยให้คุณสามารถกำหนดเป้าหมายไปยังคอนเทนเนอร์ที่เฉพาะเจาะจงได้หากคุณมี container contexts ที่ซ้อนกัน

เมื่อคุณสร้าง container context แล้ว คุณสามารถใช้กฎ @container เพื่อกำหนดสไตล์ที่จะนำไปใช้เมื่อตรงตามเงื่อนไขบางอย่าง

พลังของตัวดำเนินการทางตรรกะ: 'and', 'or', และ 'not'

ความมหัศจรรย์ที่แท้จริงจะเกิดขึ้นเมื่อคุณรวม container queries เข้ากับตัวดำเนินการทางตรรกะ ตัวดำเนินการเหล่านี้ช่วยให้คุณสร้างเงื่อนไขที่ซับซ้อนซึ่งกำหนดเป้าหมายไปยังสถานะเฉพาะของคอนเทนเนอร์ได้ เรามาสำรวจตัวดำเนินการแต่ละตัวโดยละเอียดกัน

ตัวดำเนินการ 'and': การกำหนดเงื่อนไขหลายอย่างพร้อมกัน

ตัวดำเนินการ and ช่วยให้คุณสามารถรวมเงื่อนไขหลายอย่างเข้าด้วยกัน โดยกำหนดให้เงื่อนไข ทั้งหมด ต้องเป็นจริงสไตล์จึงจะถูกนำไปใช้ สิ่งนี้มีประโยชน์เมื่อคุณต้องการกำหนดเป้าหมายคอนเทนเนอร์ที่ตรงตามเกณฑ์ขนาดและสถานะที่เฉพาะเจาะจงพร้อมกัน

ตัวอย่าง: สมมติว่าคุณมีคอนเทนเนอร์ที่ต้องการจัดสไตล์ให้แตกต่างออกไปหากมีความกว้างมากกว่า 500px และมี data attribute ที่เฉพาะเจาะจงตั้งค่าไว้

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 500px) and (data-theme="dark") {
  .card {
    background-color: #333;
    color: #fff;
  }
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ .card จะมีพื้นหลังสีเข้มและข้อความสีขาวก็ต่อเมื่อ .card-container มีความกว้างอย่างน้อย 500px และ มี attribute data-theme ที่ตั้งค่าเป็น "dark" หากเงื่อนไขใดเงื่อนไขหนึ่งไม่เป็นจริง สไตล์ภายในกฎ @container จะไม่ถูกนำไปใช้

กรณีการใช้งานจริงสำหรับ 'and':

• การเปลี่ยนแปลงเลย์เอาต์ตามเงื่อนไข: เปลี่ยนเลย์เอาต์ของคอมโพเนนต์ตามความกว้างและการมีอยู่ของคลาสหรือ data attribute ที่เฉพาะเจาะจง (เช่น เปลี่ยนจากเลย์เอาต์คอลัมน์เดียวเป็นหลายคอลัมน์หากคอนเทนเนอร์กว้างพอและมีคลาส "featured")
• การจัดสไตล์ตามธีม: ใช้สไตล์ที่แตกต่างกันตามธีมของคอนเทนเนอร์ (เช่น โหมดมืดหรือสว่าง) และ ขนาดของมัน
• การจัดสไตล์ตามสถานะ: ปรับลักษณะที่ปรากฏของคอมโพเนนต์ตามขนาดและสถานะของมัน (เช่น "active", "disabled")

ตัวดำเนินการ 'or': การเป็นจริงเมื่อเงื่อนไขใดเงื่อนไขหนึ่งเป็นจริง

ตัวดำเนินการ or ช่วยให้คุณใช้สไตล์ได้หาก อย่างน้อยหนึ่ง เงื่อนไขที่ระบุเป็นจริง สิ่งนี้มีประโยชน์เมื่อคุณต้องการกำหนดเป้าหมายคอนเทนเนอร์ที่อยู่ในช่วงขนาดที่แตกต่างกันหรือมีสถานะที่แตกต่างกัน

ตัวอย่าง: สมมติว่าคุณต้องการใช้สไตล์ที่เฉพาะเจาะจงกับคอนเทนเนอร์หากมีความกว้างน้อยกว่า 300px หรือมากกว่า 800px

            
.card-container {
  container-type: inline-size;
}

@container (max-width: 300px) or (min-width: 800px) {
  .card {
    padding: 1em;
    border: 1px solid #ccc;
  }
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ .card จะมี padding 1em และเส้นขอบหาก .card-container มีความกว้างน้อยกว่า 300px หรือ มากกว่า 800px หากความกว้างของคอนเทนเนอร์อยู่ระหว่าง 300px และ 800px (รวมขอบเขต) สไตล์ภายในกฎ @container จะไม่ถูกนำไปใช้

กรณีการใช้งานจริงสำหรับ 'or':

• การจัดการขนาดหน้าจอที่แตกต่างกัน: ใช้สไตล์ที่แตกต่างกันกับคอมโพเนนต์ตามว่าจะแสดงบนหน้าจอขนาดเล็ก (เช่น อุปกรณ์มือถือ) หรือหน้าจอขนาดใหญ่ (เช่น เดสก์ท็อป)
• การให้เลย์เอาต์ทางเลือก: เสนอเลย์เอาต์ที่แตกต่างกันสำหรับคอมโพเนนต์ขึ้นอยู่กับว่ามีพื้นที่ว่างมากน้อยเพียงใด
• การสนับสนุนหลายธีม: ใช้สไตล์ที่เฉพาะเจาะจงสำหรับธีมหรือรูปแบบต่างๆ ของคอมโพเนนต์ ตัวอย่างเช่น คอมโพเนนต์อาจมีสไตล์ที่แตกต่างกันตามว่าจะใช้ในบริบท "primary" หรือ "secondary" โดยไม่คำนึงถึงขนาดของมัน

ตัวดำเนินการ 'not': การยกเว้นเงื่อนไขเฉพาะ

ตัวดำเนินการ not ช่วยให้คุณสามารถใช้สไตล์เมื่อเงื่อนไขที่ระบุ ไม่ เป็นจริง ซึ่งอาจมีประโยชน์สำหรับการกลับตรรกะหรือกำหนดเป้าหมายคอนเทนเนอร์ที่ไม่มีลักษณะเฉพาะ

ตัวอย่าง: สมมติว่าคุณต้องการใช้สไตล์ที่เฉพาะเจาะจงกับคอนเทนเนอร์ ยกเว้นกรณีที่มีคลาส "featured"

            
.card-container {
  container-type: inline-size;
}

@container not (.featured) {
  .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ .card จะมีเงา (box shadow) ยกเว้นกรณีที่ .card-container มีคลาส "featured" หากคอนเทนเนอร์มีคลาส "featured" เงาจะไม่ถูกนำไปใช้

กรณีการใช้งานจริงสำหรับ 'not':

• การใช้สไตล์เริ่มต้น: ใช้ not เพื่อใช้สไตล์เริ่มต้นกับองค์ประกอบที่ไม่มีคลาสหรือ attribute ที่เฉพาะเจาะจง ซึ่งจะช่วยให้ CSS ของคุณง่ายขึ้นโดยหลีกเลี่ยงความจำเป็นในการเขียนทับสไตล์ในบางกรณี
• การกลับตรรกะตามเงื่อนไข: บางครั้งการกำหนดสไตล์ตามสิ่งที่ไม่ควรจะเป็นนั้นง่ายกว่า not ช่วยให้คุณกลับตรรกะและกำหนดเป้าหมายองค์ประกอบที่ไม่ตรงตามเงื่อนไขที่เฉพาะเจาะจง
• การสร้างข้อยกเว้น: ใช้ not เพื่อสร้างข้อยกเว้นสำหรับกฎการจัดสไตล์ทั่วไป ตัวอย่างเช่น คุณอาจใช้สไตล์ที่เฉพาะเจาะจงกับคอนเทนเนอร์ทั้งหมดยกเว้นคอนเทนเนอร์ที่อยู่ในส่วนใดส่วนหนึ่งของหน้า

การรวมตัวดำเนินการทางตรรกะเพื่อสร้างเงื่อนไขที่ซับซ้อน

พลังที่แท้จริงของตัวดำเนินการทางตรรกะใน container query มาจากการรวมกันเพื่อสร้างเงื่อนไขที่ซับซ้อน คุณสามารถใช้วงเล็บเพื่อจัดกลุ่มเงื่อนไขและควบคุมลำดับการประเมินผลได้ เช่นเดียวกับที่คุณทำใน JavaScript หรือภาษาโปรแกรมอื่นๆ

ตัวอย่าง: สมมติว่าคุณต้องการใช้สไตล์ที่เฉพาะเจาะจงกับคอนเทนเนอร์หากมีความกว้างมากกว่า 600px และ มีคลาส "primary" หรือ ไม่มีคลาส "secondary"

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 600px) and (.primary or not(.secondary)) {
  .card {
    border: 2px solid blue;
  }
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ .card จะมีเส้นขอบสีน้ำเงินหากตรงตามเงื่อนไขต่อไปนี้:

1. .card-container มีความกว้างมากกว่า 600px
2. และ อย่างใดอย่างหนึ่ง:
• .card-container มีคลาส "primary"
• หรือ .card-container ไม่ มีคลาส "secondary"

ตัวอย่างนี้แสดงให้เห็นว่าคุณสามารถสร้างกฎการจัดสไตล์ที่เฉพาะเจาะจงและละเอียดอ่อนได้อย่างไรโดยใช้ตัวดำเนินการทางตรรกะแบบผสมผสาน

ข้อควรจำเมื่อรวมตัวดำเนินการ:

• ลำดับความสำคัญของตัวดำเนินการ (Operator Precedence): แม้ว่าวงเล็บจะช่วยควบคุมลำดับการประเมินผล แต่สิ่งสำคัญคือต้องเข้าใจลำดับความสำคัญเริ่มต้นของตัวดำเนินการทางตรรกะ ใน CSS container queries and มีลำดับความสำคัญสูงกว่า or ซึ่งหมายความว่า (A or B) and C แตกต่างจาก A or (B and C) ใช้วงเล็บเพื่อกำหนดลำดับการประเมินผลอย่างชัดเจนและหลีกเลี่ยงความคลุมเครือ
• ความสามารถในการอ่าน (Readability): เงื่อนไขที่ซับซ้อนอาจอ่านและทำความเข้าใจได้ยาก แบ่งเงื่อนไขที่ซับซ้อนออกเป็นส่วนย่อยๆ ที่จัดการได้ง่ายขึ้นโดยใช้วงเล็บและคอมเมนต์เพื่อปรับปรุงความสามารถในการอ่านและบำรุงรักษา
• การทดสอบ (Testing): ทดสอบ container queries ของคุณอย่างละเอียดด้วยขนาดและสถานะของคอนเทนเนอร์ที่แตกต่างกันเพื่อให้แน่ใจว่าทำงานตามที่คาดไว้ ใช้เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์เพื่อตรวจสอบสไตล์ที่ใช้และยืนยันว่ามีการใช้กฎที่ถูกต้อง

ตัวอย่างและการใช้งานจริง

เรามาสำรวจตัวอย่างการใช้งานจริงบางส่วนเกี่ยวกับวิธีที่คุณสามารถใช้ตัวดำเนินการทางตรรกะใน container query เพื่อสร้างเลย์เอาต์ที่ปรับเปลี่ยนได้และตอบสนองได้

ตัวอย่างที่ 1: คอมโพเนนต์การ์ดที่ยืดหยุ่น

พิจารณาคอมโพเนนต์การ์ดที่แสดงข้อมูลในรูปแบบต่างๆ ขึ้นอยู่กับความกว้างของมัน เราสามารถใช้ container queries กับตัวดำเนินการทางตรรกะเพื่อควบคุมเลย์เอาต์และลักษณะที่ปรากฏของการ์ดได้

            

  

    
    
Card Title
    
Card Description
    Learn More
  


            

              
                Copy
              
            
          

            
.card-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px; /* Example max-width */
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 1em;
}

.card img {
  width: 100%;
  max-width: 200px; /* Example max-width for the image */
  margin-bottom: 1em;
}

/* Default styles for small containers */
@container (max-width: 400px) {
  .card {
    text-align: center;
  }

  .card img {
    margin: 0 auto 1em;
  }
}

/* Styles for medium containers */
@container (min-width: 401px) and (max-width: 600px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

/* Styles for large containers */
@container (min-width: 601px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้:

• สำหรับคอนเทนเนอร์ที่มีความกว้าง 400px หรือน้อยกว่า องค์ประกอบในการ์ดจะจัดกึ่งกลาง
• สำหรับคอนเทนเนอร์ที่มีความกว้างระหว่าง 401px และ 600px รูปภาพและข้อความจะแสดงในแนวนอน โดยรูปภาพอยู่ทางซ้าย
• สำหรับคอนเทนเนอร์ที่กว้างกว่า 600px เลย์เอาต์จะยังคงเหมือนกับคอนเทนเนอร์ขนาดกลาง แต่รายการต่างๆ จะจัดชิดด้านบน

ตัวอย่างที่ 2: เมนูนำทางที่ตอบสนอง (Responsive)

อีกหนึ่งตัวอย่างที่ใช้ได้จริงคือเมนูนำทางที่ปรับเปลี่ยนตามพื้นที่ว่าง เราสามารถใช้ container queries เพื่อสลับระหว่างเมนูแบบไอคอนที่กะทัดรัดกับเมนูแบบข้อความเต็มรูปแบบ

            


            

              
                Copy
              
            
          

            
.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 0.5em;
}

.nav-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}

.nav-container li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  padding: 0.5em;
}

.nav-container i {
  font-size: 1.2em;
  margin-right: 0.5em;
}

.nav-container span {
  display: none; /* Hide text by default */
}

/* Styles for larger containers */
@container (min-width: 400px) {
  .nav-container span {
    display: inline; /* Show text for larger containers */
  }
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ รายการเมนูนำทางจะแสดงเฉพาะไอคอนในตอนแรก แต่เมื่อคอนเทนเนอร์มีความกว้างมากกว่า 400px ป้ายกำกับข้อความจะแสดงควบคู่ไปกับไอคอน ทำให้เป็นเมนูที่สื่อความหมายได้มากขึ้น

ตัวอย่างที่ 3: การรองรับหลายภาษาและทิศทางของข้อความ (Internationalization)

Container queries ยังมีประโยชน์สำหรับการปรับเลย์เอาต์ตามทิศทางของข้อความ ซึ่งมีความสำคัญอย่างยิ่งสำหรับเว็บไซต์นานาชาติที่รองรับภาษาที่เขียนจากขวาไปซ้าย (RTL) เช่น ภาษาอาหรับหรือฮิบรู

            

  

    
Article Title
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
  


            

              
                Copy
              
            
          

            
.article-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.article {
  padding: 1em;
}

/* Default styles for LTR (Left-to-Right) */
.article h1 {
  text-align: left;
}

/* Styles for RTL (Right-to-Left) */
@container (dir(rtl)) {
  .article h1 {
    text-align: right;
  }
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ container query dir(rtl) จะกำหนดเป้าหมายไปยังคอนเทนเนอร์ที่มี attribute dir ตั้งค่าเป็น "rtl" เมื่อทิศทางของข้อความเป็น RTL หัวเรื่องจะถูกจัดชิดขวา ทำให้มั่นใจได้ว่าเลย์เอาต์จะถูกปรับให้เหมาะสมสำหรับภาษาและระบบการเขียนที่แตกต่างกัน

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ตัวดำเนินการทางตรรกะใน Container Query

เพื่อให้ได้ประโยชน์สูงสุดจากตัวดำเนินการทางตรรกะใน container query ควรคำนึงถึงแนวทางปฏิบัติที่ดีที่สุดต่อไปนี้:

• เริ่มต้นง่ายๆ: เริ่มต้นด้วย container queries พื้นฐานและค่อยๆ เพิ่มตัวดำเนินการทางตรรกะตามความจำเป็น หลีกเลี่ยงการสร้างเงื่อนไขที่ซับซ้อนเกินไปซึ่งยากต่อการทำความเข้าใจและบำรุงรักษา
• ใช้ชื่อที่มีความหมาย: ใช้ชื่อคลาสและ data attributes ที่สื่อความหมายเพื่อให้ container queries ของคุณอ่านง่ายขึ้นและเป็นเอกสารในตัวเอง
• ให้ความสำคัญกับความสามารถในการอ่าน: ใช้วงเล็บและคอมเมนต์เพื่อปรับปรุงความสามารถในการอ่านของเงื่อนไขที่ซับซ้อน แบ่งเงื่อนไขยาวๆ ออกเป็นส่วนย่อยๆ ที่จัดการได้ง่ายขึ้น
• ทดสอบอย่างละเอียด: ทดสอบ container queries ของคุณด้วยขนาดและสถานะของคอนเทนเนอร์ที่แตกต่างกันเพื่อให้แน่ใจว่าทำงานตามที่คาดไว้ ใช้เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์เพื่อตรวจสอบสไตล์ที่ใช้และยืนยันว่ามีการใช้กฎที่ถูกต้อง
• พิจารณาประสิทธิภาพ: แม้ว่าโดยทั่วไปแล้ว container queries จะมีประสิทธิภาพ แต่เงื่อนไขที่ซับซ้อนอาจส่งผลกระทบต่อประสิทธิภาพได้ หลีกเลี่ยงการสร้างเงื่อนไขที่ซับซ้อนเกินไปซึ่งต้องให้เบราว์เซอร์ทำการคำนวณอย่างหนัก
• การเพิ่มประสิทธิภาพแบบก้าวหน้า (Progressive Enhancement): ใช้ container queries เป็นการเพิ่มประสิทธิภาพแบบก้าวหน้า จัดเตรียมทางเลือกสำหรับเบราว์เซอร์ที่ไม่รองรับ container queries เพื่อให้แน่ใจว่าฟังก์ชันการทำงานพื้นฐานยังคงอยู่
• จัดทำเอกสารโค้ดของคุณ: จัดทำเอกสาร container queries และตรรกะเบื้องหลังอย่างชัดเจน ซึ่งจะช่วยให้คุณและนักพัฒนาคนอื่นๆ เข้าใจและบำรุงรักษาโค้ดของคุณได้ง่ายขึ้นในอนาคต

สรุป: การยอมรับความยืดหยุ่นของตรรกะใน Container Query

ตัวดำเนินการทางตรรกะใน CSS container query เป็นชุดเครื่องมือที่ทรงพลังสำหรับการสร้างเลย์เอาต์ที่ตอบสนองและปรับเปลี่ยนได้สูง ด้วยการรวม 'and', 'or', และ 'not' คุณสามารถสร้างเงื่อนไขที่ซับซ้อนซึ่งกำหนดเป้าหมายไปยังสถานะเฉพาะของคอนเทนเนอร์และใช้สไตล์ตามนั้นได้ ซึ่งช่วยให้สามารถควบคุมเลย์เอาต์ของคุณได้ละเอียดมากขึ้นและทำให้การออกแบบที่ตอบสนองแบบอิงตามคอมโพเนนต์เป็นจริงได้

ในขณะที่การรองรับ container query ยังคงเติบโตอย่างต่อเนื่อง การเรียนรู้เทคนิคเหล่านี้จะมีความสำคัญมากขึ้นสำหรับนักพัฒนาส่วนหน้า (front-end) ด้วยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้และทดลองกับกรณีการใช้งานต่างๆ คุณจะสามารถปลดล็อกศักยภาพสูงสุดของ container queries และสร้างประสบการณ์ผู้ใช้ที่ยอดเยี่ยมบนอุปกรณ์และบริบทที่หลากหลายได้

ยอมรับความยืดหยุ่นของตรรกะใน container query และยกระดับทักษะการออกแบบที่ตอบสนองของคุณไปอีกขั้น!